<template>
	<div class="app-container">
		<div id="deke-ext__icon" class="deke-ext__float" 
			@mousedown="startDrag" 
			@click="handleClick" 
			:style="drawerVisible ? 'display: none;' : '' + '; left: ' + position.x + 'px; top: ' + position.y + 'px;'">
			<img src="https://ms-deke-file.obs.cn-south-1.myhuaweicloud.com//public/2024-08-06/logo.png" alt="" id="" />
		</div>
    <context-holder />
		<ResumeDrawer :visible="drawerVisible" @close="handleClose" @error="handleError" @success="handleSuccess" />
	</div>
</template>

<script setup>
// ------------------ import ------------------
import { ref, onMounted, defineProps } from 'vue';
import ResumeDrawer from './component/ResumeDrawer.vue';
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
// ------------------ props ------------------
const props = defineProps({
	url: String
});

// ------------------ data ------------------
const drawerVisible = ref(false);
const isDragging = ref(false);
const hasDragged = ref(false); // 新增：标记是否发生了拖拽操作
const position = ref({ x: window.innerWidth - 125, y: 65 }); // 初始位置在右上角
const offset = ref({ x: 0, y: 0 });

// ------------------ lifecycle ------------------
onMounted(() => {
	console.log('mounted', props.url);
});

// ------------------ methods ------------------
/** 开始拖拽 */
const startDrag = (e) => {
	isDragging.value = true;
	hasDragged.value = false; // 重置拖拽标记
	// 计算鼠标相对于元素左上角的偏移量
	offset.value.x = e.clientX - position.value.x;
	offset.value.y = e.clientY - position.value.y;
	
	// 添加全局事件监听
	document.addEventListener('mousemove', onDrag);
	document.addEventListener('mouseup', stopDrag);
	
	// 防止文本选中
	e.preventDefault();
};

/** 拖拽中 */
const onDrag = (e) => {
	if (!isDragging.value) return;
	
	// 标记已经发生了拖拽操作
	hasDragged.value = true;
	
	// 计算新位置，确保不超出窗口边界
	let newX = e.clientX - offset.value.x;
	let newY = e.clientY - offset.value.y;
	
	// 边界检查
	const element = document.getElementById('deke-ext__icon');
	if (element) {
		const elementWidth = element.offsetWidth;
		const elementHeight = element.offsetHeight;
		
		// 确保元素不会超出窗口边界
		newX = Math.max(0, Math.min(window.innerWidth - elementWidth, newX));
		newY = Math.max(0, Math.min(window.innerHeight - elementHeight, newY));
	}
	
	position.value.x = newX;
	position.value.y = newY;
};

/** 停止拖拽 */
const stopDrag = () => {
	isDragging.value = false;
	
	// 移除全局事件监听
	document.removeEventListener('mousemove', onDrag);
	document.removeEventListener('mouseup', stopDrag);
};

/** 点击图标回调 */
const handleClick = () => {
	// 如果发生了拖拽操作，则不触发点击事件
	if (hasDragged.value) {
		hasDragged.value = false; // 重置标记
		return;
	}
	drawerVisible.value = true;
};

/** 抽屉关闭回调 */
const handleClose = () => {
	drawerVisible.value = false;
};

/** 错误回调 */
const handleError = (msg) => {
	messageApi.error(msg);
};

/** 成功回调 */
const handleSuccess = (text) => {
	messageApi.success(text);
};
</script>
<style lang="scss" scoped>
.app-container {
	z-index: 100000;
}

.deke-ext__float {
	position: fixed;
	z-index: 10000;
	cursor: move;
	user-select: none;
	transition: transform 0.5s ease;

	img {
		width: 60px;
		height: 60px;
		border-radius: 100px;
	}
}
</style>
